<template>
  <div>
    <div style='width:100%;height:301px' v-bind:id='id'></div>
    <span>{{ testdata2.name }}</span>
  </div>
</template>

<script>
  import Echarts from 'echarts';
  var echart1 = null;
  export default {
    name: 'test',
    data () {
      return {
        d1: Number(1 === true),
        testdata2: {name: 'haha'}
      };
    },
    props: [
      'id',
      'tdata'
    ],
    methods: {

      getOption (d) {
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          color: ['#1784ff','#00e9dd','#73e4ff','#4ccfff','#6c70ff'],
          legend: {
            // orient: 'visualMap',
            x: 'left',
            bottom: 30,
            left: 'center',
            data: d[0]
          },
          grid: {
            bottom: '30%',
            top: 0,
            containLabel: true
          },
          series: [
            {
              name: '电桩监控',
              type: 'pie',
              radius: ['0%', '60%'],
              center: ['50%', '40%'],
              selectedMode: 'single',
              data: d[1]
            }
          ]
        };


        return option;
      }
    },
    mounted () {
      // console.log('组件初始化完毕');
      this.testdata2.name = '';
      echart1 = Echarts.init(document.getElementById(this.id));
    },
    beforeUpdate () {
      // console.log('组件即将改变前触发，常用',this.id,this.tdata);
      // console.log(this.tdata)
      var option = this.getOption(this.tdata);
      if (option) {
        echart1.setOption(option, true);
      }
    },
    watch: {
      'tdata': function (d) {
        var option = this.getOption(d)
        echart1.setOption(option, true);
      }
    },
    computed: {
      comp1 () {
        return `${this.d1}`;
      }
    }
  };
</script>
